<!--
 * @Author: vera_min vera_min@163.com
 * @Date: 2025-01-10 08:53:54
 * @LastEditors: vera_min vera_min@163.com
 * @LastEditTime: 2025-02-12 21:12:25
 * @FilePath: /mail-project/src/views/home/components/EmailRule.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog modal-class="add-folder-modal" v-model="centerDialogVisible" close-on-click-modal width="500px" center>
    <div class="add-folder-dialog">
          <div class="flex mb10" v-if="!parentFolder.account">
            <p style="margin-right: 14px;">在</p>
            <el-cascader
              v-model="folder"
              :options="options"
              :props="cascaderProps"
              @change="handleCascaderChange"
              size="small"
              style="width: 322px;"
            />
            <p style="margin: 0 4px;">下创建文件</p>

          </div>
      <div class="flex">
        <span style="line-height: 24px;">文件夹名称：</span>
        <el-input size="small" placeholder="请输入名称" style="width: 344px;height: 24px;" v-model="name"></el-input>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="centerDialogVisible=false;">取消</el-button>
        <el-button size="small" type="primary" @click="addFolder">
          保存
        </el-button>
      </div>
    </template>
    </el-dialog>
  </template>
  
  
<script lang="ts" setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { useEmail } from '/@/stores/email';
  import pinia from '/@/stores/index';
  import { storeToRefs } from 'pinia';

  import api from "/@/api/email/index"
  import { refreshFolder } from '/@/context/globalEvent';

  const centerDialogVisible = ref(false);
  const stores = useEmail(pinia);
  const { curAccount } = storeToRefs(stores);

  const folder = ref('');
  const name = ref('');
  const folderPath = ref('');
  const parentFolder = ref({
    account: "",
  });

  const cascaderProps = {
    expandTrigger: 'hover' as const,
    label: 'folderName',
    value: 'folderName',
    emitPath: true,
    checkStrictly: true 
  }

  const options = ref([]);

  const handleCascaderChange = (value: any) => {
    folderPath.value = value.join('/');
  }

  const getFolderList = async (detail:any) => {
    api.folder.getList(curAccount.value).then((res: any) => {
      options.value = res.data.filter((item: any) => {
        return ['星标邮件'].indexOf(item.folderName) === -1;
      })
      folder.value = detail.folderName;
      folderPath.value = detail.folderName;
    }); 
  };
  const show = (detail: any) => {
    getFolderList(detail);
    parentFolder.value = detail;
    centerDialogVisible.value = true;
  };

  const addFolder = () => {
    api.folder.addItem({
      account: curAccount.value,
      folderPath: folderPath.value ? folderPath.value + '/' + name.value : name.value
    }).then(() => {
      ElMessage.success('创建成功');
      centerDialogVisible.value = false;
      folder.value = "";
      name.value = "";
      refreshFolder();
    });
  };

  defineExpose({ show });
</script>
<style lang="scss" scoped>
.el-input {
  height: 32px;
}
:v-deep .el-cascader {
  height: 32px;
  line-height: 32px;
  .el-input {
    --el-input-inner-height: 32px;
  }
}
:deep(.el-select__wrapper) {
  height: 32px;
}
.dialog-footer {
  justify-content: flex-end;
  display: flex;
}
</style>  